<template>
	<view>
		<view class="content">
			<view style="padding: 30rpx;">
				<swiper class="swiper-box" @change="change" style="height: 360rpx;">
					<swiper-item v-for="(items, index) in good.images" :key="index">
						<image style="width: 100%; height: 100%;" mode="aspectFit" :src="items"></image>
					</swiper-item>
				</swiper>
				<view class="dot-content">
					<view v-for="(item ,index) in good.images" :key="index" class="swiper-dot" :class="current === index? 'active':''">
					</view>
				</view>
			</view>
			<view class="particular">
				<view class="particular-itle">
					<view class="particular-name"> {{ good.name }} </view>
					<view class="goods-number" @click.stop>
						<view v-if="cartNumber(good.goods_date)>0" class="reduce-button">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.reduce" @click.stop="changeCart('reduce', good)"></image>
						</view>
						<view v-if="cartNumber(good.goods_date) > 0" class="number-input">{{ cartNumber(good.goods_date) }}</view>
						<view class="add-button">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="good.goods_date === date && this.realATime < (new Date()).getTime()?icons.add_2:icons.add"
							 @click.stop="changeCart('add', good)"></image>
						</view>
					</view>
				</view>
				<view class="particular-content"> {{ good.description }} </view>
				<view class="particular-count">
					<view class="particular-reserve"> </view>
					<view class="particular-price">￥ {{ good.price }}</view>
				</view>
			</view>
			<view class="good-detail" v-html="good.details"></view>
		</view>
		<shop-cart></shop-cart>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import shopCart from '@/components/shop-cart/index.vue';
	export default {
		components: {
			shopCart
		},
		data() {
			return {
				realATime: undefined,
				current: 0,
				number: 0,
				good: {},
				date: '',
				goods_date: '',
				icons: {
					reduce: '/static/images/icons/reduce@3x.png',
					add: '/static/images/icons/icon_tj@3x.png',
					add_2: '/static/images/icons/add_2@3x.png',
				}
			};
		},
		computed: {
			...mapGetters([
				'goodsCart', 'currentEqiupment'
			])
		},
		onLoad(options) {
			this.date = this.dateMode(new Date(), 'nowDate')
			this.goods_date = options.date;
			this.getGoods()
		},
		created() {
			const nowTimeDate = new Date();
			nowTimeDate.setHours(12, 30, 0, 0); //设为当天0点0分0秒0毫秒。
			this.realATime = nowTimeDate.getTime();
		},
		methods: {
			getGoods() {
				const path = {
					app: "wx",
					api: "api_wx_index_getList",
					version: "1.0",
					type: "1",
					data: {
						equipment_id: this.currentEqiupment.eqiupment_id,
						goods_date: this.goods_date ? this.goods_date : ''
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			cartNumber(date) {
				const data = this.goodsCart;
				let number = 0
				data.forEach(element => {
					if (date === element.date) {
						number = element.number;
					}
				})
				return number
			},
			change(e) {
				this.current = e.detail.current;
			},
			changeCart(name, items) {
				const goodList = this.goodsCart;
				var goodDate = goodList.map(officer => officer.date);
				const index = goodDate.indexOf(items.goods_date)
				if (name === 'reduce') {
					const number = this.goodsCart[index].number;

					let shopData = {
						index: index,
						type: 4 // 判断是哪种类型的操作 1.新增商品，2.新增数量，3.减少数量，4.减少商品
					}

					if (number > 1) {
						shopData.type = 3
					}

					// 在vuex里面做赋值
					this.$store.commit('addToCart', shopData);
				} else {
					// 判断是否是今日订单 今日定单超过12点不能点
					if (items.goods_date === this.dateMode(new Date(), 'nowDate') && this.realATime < (new Date()).getTime()) {
						return false
					}

					if (index === -1 && items.stock >= 1) {
						const goodList = {
							goods_id: items.id,
							goods_name: items.name,
							main_img: items.main_img,
							price: items.price,
							number: 1,
							date: items.goods_date,
							stock: items.stock
						}

						const shopData = {
							goodList: goodList,
							type: 1 // 判断是哪种类型的操作 1.新增商品，2.新增数量，3.减少数量
						}

						// 在vuex里面做赋值
						this.$store.commit('addToCart', shopData);
					} else {
						const number = this.goodsCart[index].number

						if (number < items.stock) {

							let allNumber = this.goodsCart.number;
							allNumber++
							let allMoney = this.goodsCart.allMoney;
							allMoney = parseFloat(allMoney) + parseFloat(this.goodsCart[index].price);
							const shopData = {
								index: index,
								number: allNumber,
								allMoney: parseFloat(allMoney).toFixed(2),
								type: 2 // 判断是哪种类型的操作 1.新增商品，2.新增数量，3.减少数量
							}
							this.$store.commit('addToCart', shopData);

						} else {
							uni.showToast({
								icon: "none",
								title: '库存不足',
								duration: 2000
							});
						}
					}
				}
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							this.temporary()

						} else if (resj.api === "api_wx_index_getList") {
							const data = resj.data[0];
							this.good.id = data.id;
							this.good.name = data.name;
							this.good.description = data.description;
							this.good.stock = data.stock;
							this.good.details = data.details;
							this.good.goods_date = data.goods_date;
							this.good.main_img = data.main_img
							if (this.date === this.goods_date) {
								this.$set(this.good, 'price', data.buy_price)
							} else {
								this.$set(this.good, 'price', data.front_price)
							}
							this.$set(this.good, 'images', this.combImg(data.main_img, data.details_img))
						}
					}
				}
			}
		}
	};
</script>

<style>
	.particular {
		padding: 0 60rpx;
	}

	.particular-itle {
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.particular-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.particular-content {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.particular-count {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.particular-reserve {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.particular-price {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 85, 0, 1);
	}

	.goods-number {
		display: flex;
		align-items: center;
	}

	.reduce-button,
	.add-button {
		width: 48rpx;
		height: 48rpx;
	}

	.number-input {
		text-align: center;
		width: 60rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.dot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
	}

	.swiper-dot {
		width: 10rpx;
		height: 10rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.swiper-dot.active {
		width: 30rpx;
		border-radius: 5rpx;
		background: #999999
	}

	.dot-content .swiper-dot:not(:first-child) {
		margin-left: 10rpx;
	}

	.good-detail {
		padding: 20px 20px 80px 20px;
	}

	.good-detail img {
		max-width: 100%;
	}
</style>
